<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div>
      <h1>The Ajax 02 Page</h1>
      <button onclick="doAjaxGet()">Do Ajax Get</button>
      <button onclick="doAjaxPost()">Do Ajax Post</button>
      <button onclick="doAjaxPostJson()">Do Ajax Post Json</button>
      <button onclick="doAjaxDelete()">Do Ajax Delete</button>
      <button onclick="doAjaxPut()">Do Ajax Put</button>
  </div>
  <div id="result"></div>
  <script>
      //更新
      function doAjaxPut(){
          //1.创建XHR对象
          let xhr=new XMLHttpRequest();
          //2.设置状态监听
          xhr.onreadystatechange=function(){
              if(xhr.readyState==4){
                  if(xhr.status==200){
                      let div=document.getElementById("result");
                      div.innerHTML=xhr.responseText;
                  }
              }
          }
          //3.建立连接
          let params="id=101&city=tianjin"
          xhr.open("put",`http://localhost/doAjaxPut`,true);
          //put请求必须要设置请求头
          xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
          //4.发送请求
          xhr.send(params);//put请求可以将参数放到send方法内部
      }

      function doAjaxDelete(){
          debugger
          //1.创建XHR对象
          let xhr=new XMLHttpRequest();
          //2.设置状态监听
          xhr.onreadystatechange=function(){
              if(xhr.readyState==4){
                  if(xhr.status==200){
                      let div=document.getElementById("result");
                      div.innerHTML=xhr.responseText;
                  }
              }
          }
          //3.建立连接
          //let params="b";
          let params="102";
          xhr.open("delete",`http://localhost/doAjaxDelete/${params}`,true);
          //4.发送请求
          xhr.send(null);
      }
      function doAjaxPostJson(){
          //1.创建XHR对象
          let xhr=new XMLHttpRequest();
          //2.设置状态监听
          xhr.onreadystatechange=function(){
              if(xhr.readyState==4){
                  if(xhr.status==200){
                      let div=document.getElementById("result");
                      div.innerHTML=xhr.responseText;
                  }
              }
          }
          //3.建立连接
          let params={id:103,city:"xiongan"}
          let paramsStr=JSON.stringify(params);//将json对象转换为json字符串
          console.log("jsonStr",paramsStr);
          xhr.open("post",`http://localhost/doAjaxPostJSON`,true);
          //post请求必须要设置请求头
          xhr.setRequestHeader("Content-Type","application/json");
          //4.发送请求
          xhr.send(paramsStr);//post请求可以将参数放到send方法内部
      }
      function doAjaxPost(){
          //1.创建XHR对象
          let xhr=new XMLHttpRequest();
          //2.设置状态监听
          xhr.onreadystatechange=function(){
              if(xhr.readyState==4){
                  if(xhr.status==200){
                      let div=document.getElementById("result");
                      div.innerHTML=xhr.responseText;
                  }
              }
          }
          //3.建立连接
          let params="id=102&city=shenzhen"
          xhr.open("post",`http://localhost/doAjaxPost`,true);
          //post请求必须要设置请求头
          xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
          //4.发送请求
          xhr.send(params);//post请求可以将参数放到send方法内部
      }

      function doAjaxGet(){
          debugger
          //1.创建XHR对象
          let xhr=new XMLHttpRequest();
          //2.设置状态监听
          xhr.onreadystatechange=function(){
              if(xhr.readyState==4){
                  if(xhr.status==200){
                    let div=document.getElementById("result");
                    div.innerHTML=xhr.responseText;
                  }
              }
          }
          //3.建立连接
          //let params="b";
          let params="";
          xhr.open("Get",`http://localhost/doAjaxGet/${params}`,true);
          //4.发送请求
          xhr.send(null);
      }
  </script>

</body>
</html>